<template>
    <!--    消防可燃气体预警-->
    <div class="early_warning">
        <div>
            <div v-for="(item,index) in state.list" :key="index">
                <span>{{item.type}}：</span>
                <span :style="{color:(index==state.list.length-1?'#E24324':'#fff')}">{{item.value}}</span>
            </div>
        </div>
        <div @click="firedetails">火灾详情</div>
    </div>
</template>

<script lang="ts" setup>
import {reactive} from 'vue';
const state=reactive({
    list:[{
        type:'位置',
        value:'达冠生化-有机罐区'
    },{
        type:'类型',
        value:'火灾事故'
    },{
        type:'等级',
        value:'一级重大事故'
    },{
        type:'时间',
        value:'2022-06-10 10:00:00'
    },{
        type:'状态',
        value:'已出警',
    }]
})
const emit = defineEmits(['fireDetails']);
// 去详情页
const firedetails = () => {
    emit('fireDetails');
};
</script>

<style scoped lang="scss">
.early_warning {
    padding: 30px;
    > div {
        margin-bottom: 30px;
        &:nth-of-type(1) {
            > div {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
                span {
                    font-size: 14px;
                    &:nth-of-type(1) {
                        color: #B6B5B5;
                    }
                    &:nth-of-type(2) {
                        color: #FFFFFF;
                    }
                }
                &:last-child{
                    margin-bottom: 0;
                }
            }
        }


        &:last-child {
            margin: 0 auto;
            display: flex;
            justify-content: center;
            width: 88px;
            height: 28px;
            line-height: 28px;
            background: #fbce05;
            border-radius: 4px;
            font-size: 14px;
            text-align: center;
            color: #08233a;
            cursor: pointer;
        }
    }
}
</style>
